<template>
  <div>
    <h1>事件绑定</h1>
    <div>{{ number }}</div>
    <button v-on:click="add">加1</button>
    <button @click="submit">减1</button>
    <button @click="submit(2)">减2</button>
    <button @click="submit(2, $event)">减2</button>
    <hr />

    <div v-if="isShow">isShow为true</div>
    <div v-else>isShow为false</div>
    <button @click="change">切换显示</button>
    <hr />
    <ul>
      <li style="text-align: left;" v-for="(item, index) in news" :key="index">
        {{ item.department }}&nbsp;{{ item.title }}&nbsp;[ {{ item.time }} ]
      </li>
    </ul>
    <button @click="addItem">增加新闻</button>
    <button @click="delItem">删除新闻</button>
    <button @click="updateItem">更新首条</button>
    <hr />

    <div v-for="(value, key, index) in obj" :key="key">
      {{ index }} - {{ key }} : {{ value }}
    </div>
    <button @click="addAttr">增加属性</button>
    <button @click="delAttr">删除属性</button>
    <button @click="updateAttr">更新属性</button>
    <hr />
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1,
      isShow: true,
      news: [
        {
          title: "关于农村旧土地改造相关事宜",
          time: "2020-10-10 10:10:10",
          department: "土建部"
        },
        {
          title: "关于农村旧土地改造相关事宜",
          time: "2020-10-10 10:10:10",
          department: "土建部"
        }
      ],
      obj: {
        name: "lixx",
        age: 30
      }
    };
  },
  methods: {
    add(event) {
      console.log(event);
      this.number += 1;
    },
    submit(val, event) {
      var type = typeof val;
      console.log(type);
      console.log(event);
      // 第一个参数没有传递为默认事件参数object
      if (typeof val === "object") {
        this.number--;
        // number
      } else {
        this.number -= val;
      }
    },
    change() {
      this.isShow = !this.isShow;
    },
    addItem() {
      this.news.unshift({
        title: "测试标题",
        time: "2020-01-01 12:10:12",
        department: "人社部"
      });
    },
    delItem() {
      this.news.shift();
    },
    updateItem() {
      // 以下更新是无用的: 不能直接修改数组属性
      this.news[0] = {
        title: "新标题",
        time: "2020-11-11 11:11:11",
        department: "教育部"
      };

      // 更新方法一
      // this.$set(this.news, 0, {
      //   title: "新标题",
      //   time: "2020-11-11 11:11:11",
      //   department: "教育部"
      // });

      // 更新方法二
      this.news.splice(0, 1, {
        title: "新标题",
        time: "2020-11-11 11:11:11",
        department: "教育部"
      });
    },
    addAttr() {
      // 方法一
      // 不能直接修改数组,而是用set方法添加或修改
      //this.$set(this.obj, "hobyy", "吃饭睡觉打游戏!");

      // 方法二
      // 直接赋值新的变量，新变量拷贝原有变量后在增加额外属性
      this.obj = {
        // es6语法：展开对象所有属性
        ...this.obj,
        // 增加额外属性
        hobyy: "吃饭睡觉打dota！"
      };
    },
    delAttr() {
      // 删除age属性
      // 此方法无效
      //delete this.obj.age;
      // 方法一
      // let _obj = { ...this.obj };
      // delete _obj.age;
      // this.obj = { ..._obj };
      // 方法二
      this.$delete(this.obj, "age");
    },
    updateAttr() {
      // 属性可直接更新
      this.obj.age = 31;
    }
  }
};
</script>
<style lang="stylus" scoped></style>
